<template>
	<div class="contents">
		<div class="topStyle">
			<div class="title">
				<div class="rwfx">任务分析</div>
				<div>
					<el-select class="sel  select-custom" size="medium" style="width: 95px;" @change="handleChangeYear" v-model="year">
						<el-option v-for="item in flagTypes" :label="item" :value="item" :key="item"></el-option>
					</el-select>
					<div class="container">
						<el-cascader
							:v-model="monthValue"
							:options="monthList"
							:props="{ multiple: true }"
							@change="handleChangeMonth"
							ref="cascader"
							clearable>
						</el-cascader>
<!--						<button class="hover-button">Hover over me</button>-->
						<div  v-if="monthsData.length>0" style="min-width: 150px;" class="tooltip">{{monthsData.flat().join('、')}}</div>
					</div>
					<a @click="reset()" style="color:#3894ff;border-bottom:1px solid #3894ff;margin-left:10px; cursor: pointer; ">重置</a>
				</div>
			</div>
			<el-row :gutter="20">
				<el-col :span="6" v-for="(item,index) in cardList" :key="index">
					<div class="cards">
						<img :src="item.url">
						<div class="typeStyle">{{item.type}}</div>
						<div class="numStyle">{{item.num}}</div>
<!--						<div v-show="item.jsl" class="jslStyle"><span>较上月</span><span>{{item.jsl}}</span><img src="@/assets/Vector.png"></div>-->
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="bottomStyle">
			<el-row :gutter="20">
				<el-col :span="16">
					<div class="ringStyle">
						<div class="yuan">
							<div>任务状态</div>
							<div class="container">
<!--								<el-cascader-->
<!--									v-model="taskStatus"-->
<!--									:options="monthlyTaskStatusLists"-->
<!--									:props="{ multiple: true }"-->
<!--									@change="handleChangeStatus"-->
<!--									clearable></el-cascader>-->
<!--								<div  v-if="taskStatus.length>0&&Array.isArray(taskStatus) && taskStatus.every(Array.isArray)" style="min-width: 150px;" class="tooltip">{{ statusData.join('、')}}</div>-->
							</div>
						</div>
						<div id="chart1" style="width: 100%;height:440px"></div>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="ringStyle">
						<div class="yuan">
							<div>完成情况</div>
							<a v-if="tableShow==false" @click="showTable()" style="color:#3894ff;border-bottom:1px solid #3894ff; cursor: pointer; ">人员列表</a>
							<a v-else  @click="showRing()" style="color:#3894ff;border-bottom:1px solid #3894ff; cursor: pointer; ">统计</a>
						</div>
						<div id="mapChart"  v-show="tableShow==false" style="width: 100%;height:440px"></div>
						<!--人员列表-->
						<div v-show="tableShow" style="margin-top:40px">
							<el-table
								:header-cell-style="{fontSize: '14px', backgroundColor: '#e8e8e8',color:'#000',fontWeight:700}"
								:data="tableData"
								style="width: 100%">
								<el-table-column type="index" align="center" label="序号"/>
								<el-table-column prop="name" label="姓名" align="center"/>
								<el-table-column prop="jsl" label="及时率" sortable align="center"/>
								<el-table-column prop="ywc" align="center" sortable label="已完成"/>
								<el-table-column prop="ycs" align="center" sortable label="已超时"/>
								<el-table-column prop="zrw" align="center" sortable label="总任务"/>
							</el-table>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
import * as echarts from 'echarts';
import {Encrypt} from "@/utils/cryptojs";
export default {
	name: "index",
	data(){
		return{
			monthValue:[],//月份绑定值
			taskStatus:[],//状态绑定值
			tableShow:false,
			// taskList:[
			// 	{ value: 1, label: '已完成'},
			// 	{ value: 2, label: '进行中'},
			// 	{ value: 3, label: '已超时'},],
			//月份数组
			monthList:[
				{ value: 1, label: '1月'},
				{ value: 2, label: '2月'},
				{ value: 3, label: '3月'},
				{ value: 4, label: '4月'},
				{ value: 5, label: '5月'},
				{ value: 6, label: '6月'},
				{ value: 7, label: '7月'},
				{ value:8, label: '8月'},
				{ value: 9, label: '9月'},
				{ value:10, label: '10月'},
				{ value: 11, label: '11月'},
				{ value: 12, label: '12月'},
			],

			//年份数组
			flagTypes:['2021年','2022年','2023年','2024年'],//年份数组
			//卡片数组
			cardList:[
				{num:'',type:'总任务',url:require('@/assets/1.png')},
				{num:'',type:'已完成',url:require('@/assets/2.png')},
				{num:'',type:'进行中',url:require('@/assets/3.png')},
				{num:'',jsl:'',type:'及时率',url:require('@/assets/4.png')}
			],
		//	人员列表数据
			tableData:[],
			monthsData:[],//展示月份Tooltip 文字提示
			statusData:[],//展示类型Tooltip 文字提示
			form:{},
			datas:{
				year:new Date().getFullYear(),//年份默认显示
				monthList:[],
				statusList:[]
			},
			monthlyTaskStatusLists:[],
			data1:[],
			data2:[],
			myChart:null,
			year:new Date().getFullYear()+'年'
			// series: [
			// 	{name:'已完成', type: 'bar' , barGap: '0%',barWidth: '20%' ,data:this.monthlyTaskStatusLists.ywc,color:'#b3e19d'},
			// 	{name:'进行中', type: 'bar' ,barGap: '0%', barWidth: '20%',data:this.monthlyTaskStatusLists.jxz,color:'#e6a23c'},
			// 	{name:'已超时', type: 'bar',barGap: '0%', barWidth: '20%' ,data:this.monthlyTaskStatusLists.ycs,color:'#f56c6c'}
			// ]
		}
	},
	 mounted() {
		this.$nextTick(()=>{
			this.datas.year=new Date().getFullYear()
			this.getRing()
			// this.getBarchart()
		})
		// this.getUserList()
		 this.getList()
	},

	methods:{
		async getList(){
			this.monthlyTaskStatusLists = []
			this.newmonthList=[]

			const resUserData = await this.$API.auth.getDataAnalysis.post(this.datas)
			if (resUserData) {
				// console.log(resUserData,55555555555)
				this.form={...resUserData.data.cardList}
				this.cardList[0].num=resUserData.data.cardList.total
				this.cardList[1].num=resUserData.data.cardList.completed
				this.cardList[2].num=resUserData.data.cardList.ongoing
				this.cardList[3].num=resUserData.data.cardList.rate
				this.cardList[3].jsl=resUserData.data.cardList.rateChange
				this.monthlyTaskStatusLists=resUserData.data.monthlyTaskStatusLists
				this.newmonthList= resUserData.data.monthlyTaskStatusLists.month
				this.tableData=resUserData.data.tableDataList
				console.log(11111111111,this.monthlyTaskStatusLists)

				const E_Data = {
					label: {
						show: true, // 显示数值
						formatter: function(params) {
							// 值为 0 隐藏
							if (params.value === '0') {
								return '';
							}
							return params.value;
						},
						textStyle:{
							color: '#fff',
							fontSize: 24,
							fontWeight: 'bold'
						}
					},
					type: 'bar',
					barGap: '0%',
					// num:1,
					barWidth: '20%' ,
					// data:resUserData.data.monthlyTaskStatusLists.ywc,
					// color:'#b3e19d',
					// name:'已完成'
				}
				//判断是否为空
				if(resUserData.data.monthlyTaskStatusLists.ywc.length>0){
					const SUCCESS_DATA = {
						...E_Data,
						num:1,
						data:resUserData.data.monthlyTaskStatusLists.ywc,
						color:'#b3e19d',
						name:'已完成'
					}
					this.data1.push(SUCCESS_DATA)
				}
				if(resUserData.data.monthlyTaskStatusLists.jxz.length>0){
					const INPROGRESS_DATA = {
						...E_Data,
						num:1,
						data:resUserData.data.monthlyTaskStatusLists.jxz,
						color:'#e6a23c',
						name:'进行中'
					}
					this.data1.push(INPROGRESS_DATA)
				}
				if(resUserData.data.monthlyTaskStatusLists.ycs.length>0){
					const TIMEOUT_DATA = {
						...E_Data,
						num:1,
						data:resUserData.data.monthlyTaskStatusLists.ycs,
						color:'#f56c6c',
						name:'已超时'
					}
					this.data1.push(TIMEOUT_DATA)
				}
				// arr.forEach((item,index)=>{
				// 	if(item == 'ywc'&&resUserData.data.monthlyTaskStatusLists.ywc.length>0){
				// 		this.monthlyTaskStatusLists.push({ value: 1, label: '已完成'})
				// 	}
				// 	if(item == 'jxz'&&resUserData.data.monthlyTaskStatusLists.jxz.length>0){
				// 		this.monthlyTaskStatusLists.push({ value: 2, label: '进行中'})
				// 	}
				// 	if(item == 'ycs'&&resUserData.data.monthlyTaskStatusLists.ycs.length>0){
				// 		this.monthlyTaskStatusLists.push({ value: 3, label: '已超时'})
				// 	}
				// })
				// this.taskStatus = this.monthlyTaskStatusLists.map(option => option.value);
				// this.getBarchart()
				//调用图形
				this.$nextTick(()=>{
					this.getBarchart()
					this.getRing()
				})
			}
		},
		//重置按钮
		reset(){
			this.monthsData=[]
			this.monthValue=[]
			this.datas.monthList=[]
			this.data1=[]
			this.$nextTick(()=>{
				this.datas.year=new Date().getFullYear()
				this.year=new Date().getFullYear()+'年'
				this.getList()
			})
		},
		handleChangeYear(value){
			this.data1=[]
			this.year = value
			this.datas.year=parseInt(value.replace("年", ""), 10);
			// this.datas.year=value
			// this.datas.year=value
			console.log(this.datas.year)
			this.getList()
			this.getBarchart()
		},
		//选中月份下拉数据 获取tooltip提示文字
		handleChangeMonth(value) {
			let result=[value.flat()][0]
			this.monthsData=result.map(item => `${this.monthList[item-1]?.label}`)
			// this.months=result.map(item => `${this.monthList[item-1].label}`)
			this.datas.monthList=result.map(item => `${this.monthList[item-1]?.value}`)
			this.data1=[]
			this.getList()
			this.getBarchart()
		},
		// handleChangeStatus(value, selectedData) {
		// 	let result = [value.flat()][0]
		// 	// console.log(result)
		// 	this.statusData=result.map(item => `${this.taskList[item-1]?.label}`)
		// 	if( this.statusData.length==3){
		// 		console.log( this.taskStatus)
		// 	}
		// 	console.log(this.data1,22222222222)
		// 	this.data2 = []
		// 	// { type: 'bar',barGap: '0%', barWidth: '20%' ,data:[160,80,90,300,110,120,130,140,150,160,170,124]}
		// 	this.statusData=[]
		// 	result.forEach((item,index)=>{
		// 		this.data1.forEach((key,num)=>{
		// 			if(key.num == item){
		// 				this.data2.push(key)
		// 				this.statusData.push(key.label)
		// 			}
		// 		})
		// 	})
		// 	console.log(this.statusData)
		// 	this.myChart.dispose()
		// 	this.getBarchart1()
		// },
		//点击人员列表按钮显示列表
		 showTable(){
			this.tableShow = true

		},
		showRing(){
			this.tableShow = false
		},
		//获取人员列表数据
		// getUserList(){
		// 	console.log('获取人员列表数据接口')
		// },
		//引入柱状图
		// getBarchart1(){
		// 	var chartDom = document.getElementById('chart1');
		// 	this.myChart = echarts.init(chartDom);
		// 	var myChartBar = this.myChart
		// 	var option;
		// 	option = {
		// 		legend: {
		// 			show: true,
		// 			bottom: '3%',
		// 			left: 'center'
		// 		},
		// 		tooltip: {
		// 			// 触发类型，默认数据触发，可选为：'item' | 'axis'
		// 			trigger: 'axis',
		// 			// 显示内容格式器：{string}（Template） | {Function}，支持使用回调函数生成复杂的提示文本
		// 			formatter:  (params) => {
		// 				// params 是一个包含当前数据信息的数组
		// 				// 通过模板语法可以自定义显示的内容
		// 				// params 是一个包含当前数据信息的数组
		// 				// 通过模板语法可以自定义显示的内容
		// 				let result = '';
		// 				result += `<div style="color:#101010;font-size: 14px;font-family: AlibabaPuHui;font-weight: 500;margin-bottom: 10px;">${params[0].name}</div>`
		// 				params.forEach((item,index) => {
		// 					// let label = this.monthlyTaskStatusLists.map(e => {
		// 					//   console.log(item.value,e.value)
		// 					//   if (item.value == e.value) return e;
		// 					// })
		// 					// console.log(label)
		// 					// 鼠标悬停样式ss
		// 					result += `
        //             <div>
        //             <div style="width:217px;height:38px;background: #fff;
        //             border-radius: 6px;
        //             box-shadow: rgba(190, 203, 214, 0.25) 0px 2px 6px 0px;
        //             font-weight: 400;
        //             background: rgb(255, 255, 255);
        //             color: #000;
        //             margin-bottom: 7px;
        //             display: flex;flex-direction: row;
        //             padding: 20px;align-items: center"><div  style=" width: 15px;height: 15px;border-radius: 50%;background-color: ${item.color}; "></div>  <span style="margin: 0 70px 0 20px">${ this.taskStatus[item.componentIndex] == 1? '已完成' :this.taskStatus[item.componentIndex] == 2?'进行中':'已超时' }</span>  <span>${item.value}</span></div>
        //             </div>`
		// 				});
		// 				return result
		// 			},
		// 			// 自定义样式
		// 			backgroundColor: 'rgba(238,246,253,1)', // 提示背景颜色
		// 			// borderColor: '#333', // 提示边框颜色
		// 			borderWidth: 1, // 提示边框宽度
		// 			padding: 10, // 提示内边距
		// 			textStyle: {
		// 				color: '#fff' // 文本颜色
		// 			}
		// 		},
		// 		// dataset: {
		// 		// 	source: [
		// 		// 		['product',this.monthlyTaskStatusLists[0].label,this.monthlyTaskStatusLists[1].label,this.monthlyTaskStatusLists[2].label, ],
		// 		// 		['10月', 43.3, 85.8, 93.7],
		// 		// 		['11月', 83.1, 73.4, 55.1],
		// 		// 		['9月', 86.4, 65.2, 82.5],
		// 		// 	]
		// 		// },
		// 		xAxis: { type: 'category', data:this.newmonthList},
		// 		yAxis: {},
		// 		series: this.data2
		// 	};
		//
		// 	option && myChartBar.setOption(option);
		// 	//解决echarts图 自适应
		// 	window.addEventListener('resize', function () {
		// 		myChartBar.resize()
		// 	})
		// },
		//引入柱状图
		getBarchart(){
			var doms= document.getElementById("chart1");
			// 清除Echarts默认添加的属性
			var myChartBar = echarts.init(doms);
			// var chartDom = document.getElementById('chart1');
			// this.myChart = echarts.init(chartDom);
			// var myChartBar = this.myChart
			var option;
			option = {
				legend: {
					bottom: '3%',
					left: 'center'
				},
				tooltip: {
					// 触发类型，默认数据触发，可选为：'item' | 'axis'
					trigger: 'axis',
					// 显示内容格式器：{string}（Template） | {Function}，支持使用回调函数生成复杂的提示文本
					formatter:  (params)=> {
						// params 是一个包含当前数据信息的数组
						console.log(params)
						// 通过模板语法可以自定义显示的内容
						let result = '';
						result += `<div style="color:#101010;font-size: 14px;font-family: AlibabaPuHui;font-weight: 500;margin-bottom: 10px;">${params[0].name}</div>`
						params.forEach((item,index) => {
							// let label = this.data1.map(e => {
							//   console.log(item.value,e.value)
							//   if (item.value == e.value) return e;
							// })
							// console.log(label)
							// 鼠标悬停样式ss
							result += `
                    <div>
                    <div style="width:217px;height:38px;background: #fff;
                    border-radius: 6px;
                    box-shadow: rgba(190, 203, 214, 0.25) 0px 2px 6px 0px;
                    font-weight: 400;
                    background: rgb(255, 255, 255);
                    color: #000;
                    margin-bottom: 7px;
                    display: flex;flex-direction: row;
                    padding: 20px;align-items: center"><div  style=" width: 15px;height: 15px;border-radius: 50%;background-color: ${item.color}; "></div>  <span style="margin: 0 70px 0 20px">${item.seriesName}</span>  <span>${item.value}</span></div>
                    </div>`
						});
						return result
					},
					// 自定义样式
					backgroundColor: 'rgba(238,246,253,1)', // 提示背景颜色
					// borderColor: '#333', // 提示边框颜色
					borderWidth: 1, // 提示边框宽度
					padding: 10, // 提示内边距
					textStyle: {
						color: '#fff' // 文本颜色
					}
				},
				// dataset: {
				// 	source: [
				// 		['product',this.monthlyTaskStatusLists[0].label,this.monthlyTaskStatusLists[1].label,this.monthlyTaskStatusLists[2].label, ],
				// 		['10月', 43.3, 85.8, 93.7],
				// 		['11月', 83.1, 73.4, 55.1],
				// 		['9月', 86.4, 65.2, 82.5],
				// 	]
				// },
				xAxis: {
					type: 'category',
					data:this.newmonthList
					// axisLabel: {
					// 	inside: true,
					// 	color: '#fff'
					// }
				},
				yAxis: {},
				series: this.data1
			};

			option && myChartBar.setOption(option,true);
			//解决echarts图 自适应
			window.addEventListener('resize', function () {
				myChartBar.resize()
			})
		},
		//引入圆环图
		getRing(){
			this.$nextTick(() => {
				var domMap = document.getElementById("mapChart");
				// 清除Echarts默认添加的属性
				domMap.removeAttribute("_echarts_instance_");
				var myChartRing = echarts.init(domMap);
				var option;
				option = {
					color: [ '#b3e19d', '#f56c6c','#e6a23c',],
					tooltip: {
						trigger: 'item'
					},
					legend: {
						bottom: '3%',
						left: 'center'
					},
					series: [
						{
							name: '',
							type: 'pie',
							center:['50%','50%'],
							radius: ['50%', '70%'],
							avoidLabelOverlap: false,
							itemStyle: {
								borderRadius: 10,
								borderColor: '#fff',
								borderWidth: 2
							},
							label: {
								show: true,
								formatter:(e)=>{
									return `${e.name}\n${e.value}`
								}
							},
							data: [
								{ value: this.form.completed, name: '已完成' },
								{ value: this.form.overdue, name: '已超时' },
								{ value: this.form.ongoing, name: '进行中' },
							]
						}
					]
				};
				option && myChartRing.setOption(option);
				//解决echarts图 自适应
				// window.addEventListener('resize', function () {
				// 	myChartRing.resize()
				// })
			})
		}
	}
}
</script>

<style scoped>
.contents{
	background-color: #f6f8f9;
}
.ringStyle{
	background-color: #fff;
	padding: 20px;
	border-radius: 4px;
	width: 100%;
	height: 100%;
}
.yuan{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.yuan div:first-child{
	color: rgb(16, 16, 16);
	font-size: 16px;
	font-family: AlibabaPuHui;
	font-weight: 700;
}
.bottomStyle{
	margin-top: 20px;
}
>>>.el-table{
	height: 400px;
	overflow-y: scroll;
}
.cards{
	position: relative;
	margin-top: 20px;
}
.cards img{
	width: 100%;
	min-height: 100%;
}
.cards .typeStyle{
	position: absolute;
	left: 12%;
	top: 15%;
	font-size: 16px;
	font-weight: 400;
	color: rgb(16, 16, 16);
}
.cards .numStyle{
	position: absolute;
	left: 12%;
	top:38%;
	color: rgb(16, 16, 16);
	font-size: 24px;
	font-family: AlibabaPuHui;
	font-weight: bold;
	line-height: 33px;
}
.cards .jslStyle{
	width: 130px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: start;
	/*justify-content: space-around;*/
	position: absolute;
	left: 12%;
	top: 70%;
}
 .jslStyle img{
	width: 20px;
}
.jslStyle span:nth-child(1){
	color: rgba(78, 89, 105, 1);
	font-size: 12px;
	font-family: AlibabaPuHui;
	font-weight: 400;
}
.jslStyle span:nth-child(2){
	color: rgb(244, 76, 76);
	font-size: 14px;
	font-family: AlibabaPuHui;
	font-weight: 400;
	margin: 0 20px;
}
.contents{
	padding: 20px;
}
.topStyle{
	width: 100%;
	padding: 20px;
	background-color: #fff;
}
.title{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}
.sel{
	width:50px;
	height:28px;
	line-height:28px;
	font-size:15px;
	font-weight:bold;
	border: none!important;
	box-shadow: none!important;
}
/* 添加一个自定义的类名以便覆盖默认样式 */
 .el-input__suffix {
	/* 隐藏原生下拉箭头 */
	display: none!important;
}

>>>.el-input__suffix::after {
	/* 使用CSS的content属性来添加三角形 */
	content: ''!important;
	display: block!important;
	width: 0!important;
	height: 0!important;
	border-left: 5px solid transparent!important;
	border-right: 5px solid transparent!important;
	border-top: 5px solid rgb(150, 150, 151)!important; /* 修改为你想要的颜色 */
	position: absolute!important;
	top: 50%!important;
	right: 12px!important;
	transform: translateY(-50%)!important;
	pointer-events: none!important; /* 确保三角形不会响应鼠标事件 */
}

>>>.el-icon svg {
	display: none;
}

>>>.el-tag .is-closable {
	background: transparent;
	padding-right: 5px;
}
>>>.el-input__wrapper {
	border: none!important;
	box-shadow: none!important;
	outline: none;
}
>>>.el-input__inner{
	color: #969697;
	font-size: 14px;
}
>>>.el-select .el-input .is-focus .el-input__wrapper:focus{
	box-shadow: none!important;
}
.card{
	width: 100%;
	height: 100px;
	border: 1px solid #1c6ca1;
}
.grid-content{
	width: 100px;
	height: 150px;
	background-color:rgba(236, 247, 254,1);
	border-radius: 10%;
}

::v-deep .el-tag.el-tag--info{
	border: none;
	background-color: transparent;
	position: relative;
	margin-right: 5px;
	color: #969697;
	font-size: 14px;
}
::v-deep .el-tag.el-tag--info::after{
	content: '、';
	position: absolute;
	right: -13px;
	bottom: 5px;
}
::v-deep .el-tag.el-tag--info:last-child::after{
	content: '';
}
.el-tag__close .el-icon-close{
	display: none;
	background-color: transparent;
}
::v-deep .el-tag.el-tag--info .el-tag__close {
	color: #409eff;
	display: none;
}
::v-deep .el-tag{
	padding: 0;
}
::v-deep .el-cascader{
	width: 80px!important;
	margin-top: 4px;
	position: relative;
}
::v-deep .el-cascader__tags{
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto; /* 横向滚动条 */
	white-space: nowrap; /* 不换行 */
	text-overflow: ellipsis; /* 超出部分显示省略号 */

}
::v-deep .el-cascader__tags::-webkit-scrollbar{
	display: none;
}
.rwfx{
	color: rgb(16, 16, 16);
	font-size: 16px;
	font-family: AlibabaPuHui;
	font-weight: 700;
}
::v-deep .el-cascader .el-input__wrapper{
	padding: 0;
}

/* 基本样式 */
.container {
	position: relative;
	display: inline-block;
}



.tooltip {
	visibility: hidden;
	min-width: 120px;
	background-color: #fff;
	color: #969697;
	border: 1px solid #ccc;
	text-align: center;
	border-radius: 5px;
	padding: 10px 10px;
	position: absolute;
	z-index: 1;
	top: 90%; /* 将工具提示放置在按钮上方 */
	left: 30%;
	margin-left: -60px; /* 使工具提示居中 */
	opacity: 0;
	transition: opacity 0.3s;
}

/* 悬停时显示工具提示 */
.container:hover .tooltip {
	visibility: visible;
	opacity: 1;
}
</style>
